<template>
  <div class="container">
      <Table :loading="countData.loading" class="hs-table-div" border :columns="columns" :data="dataList" size="small" ref="table">
      </Table>
      <Row v-if="loadData == true">
        <Col class="demo-spin-col" span="8" offset="8">
          <Spin fix>
            <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
            <div>数据正在加载</div>
          </Spin>
        </Col>
      </Row>
  </div>
</template>

<script>

// import { findZbTongList } from '@/api/grid'

export default {
  name: 'index',
  components: {
  },
  data () {
    return {
      loadData: true,
      dataList: [],
      columns: [
        { title: '机构名称', key: 'company_name', align: 'center', fixed: 'left' },
        { title: '总数', key: 'all_num', align: 'center' },
        { title: '公安执法', key: 'gazf_num', align: 'center' },
        { title: '下沉干部', key: 'xcgb_num', align: 'center' },
        { title: '医疗卫生（疾病控制）', key: 'ylws_num', align: 'center' },
        { title: '社区工作者', key: 'sq_num', align: 'center' },
        { title: '志愿者', key: 'zyz_num', align: 'center' },
        { title: '物业人员', key: 'wy_num', align: 'center' }
      ],
      countData: {
        loading: false
      }
    }
  },
  watch: {
  },
  methods: {
    init () {
      findZbTongList(this.params).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.loadData = false
          this.dataList = ret.data.data
          this.countData.loading = false
        } else {
          this.loadData = false
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: ret.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    // this.init()
  }
}
</script>

<style scoped>
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin: 5px;
  margin-bottom: 10px;
}
.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}
.opt-area-02 .left-con span {
  font-weight: bold;
}
.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}
.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.table-action-btn {
  margin-bottom: 3px;
}
.container >>> .ivu-btn-small {
  height: 24px;
  padding: 0 5px;
  font-size: 12px;
  border-radius: 3px;
}
.mp10 {
  margin-right: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.ivu-table-row {
  height: 57px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to   { transform: rotate(360deg);}
}
.hs-table-div {
  margin: 5px;
}
</style>
